{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>组件使用教程</h5>
                <div class="ibox-tools">
                    <a class="collapse-link" href="javascript:location.replace(location.href);">
                        <i class="glyphicon glyphicon-refresh"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="alert alert-info">
                    自主封装的组件，使用都需添加{}
                </div>
                <ul class="list-group clear-list" style="margin-bottom:0;">
                    <!--复选框-->
                    <li class="list-group-item fist-item">
                        <p>
                            <span class="label label-info">1</span> 复选框
                            <button class="btn btn-warning btn-xs" onclick="show(1)"><i class="fa fa-eye"></i> <span class="bold">演示</span></button>
                        </p>
                        <!--代码-->
                        <textarea  class="codeDiv">
                            $html->checkbox(
                                '用户角色',//标签名
                                'roles[]',//name
                                $roles,//复选框列表数据
                                'id',//key字段
                                'name',//value字段
                                $data['roles'],//选中值 数组或以","隔开的字符串
                                true //是否必填
                            )
                        </textarea>
                        <!--/代码-->

                        <!--演示-->
                        <div  id="unit_1" style="display: none">
                            {$html->checkbox(
                            '用户角色',//标签名
                            'roles[]',//name
                            $roles,//复选框列表数据
                            'id',//key字段
                            'name',//value字段
                            $data['roles'],//选中值 数组或以","隔开的字符串
                            true //是否必填
                            )}
                        </div>
                        <!--/演示-->
                    </li>

                    <!--百度编辑器-->
                    <li class="list-group-item">
                        <p>
                            <span class="label label-info">2</span> 百度编辑器
                            <button class="btn btn-warning btn-xs" onclick="show(2)"><i class="fa fa-eye"></i> <span class="bold">演示</span></button>
                        </p>
                        <textarea  class="codeDiv">
                            $html->ueditor(
                                'content',//字段名
                                'width:100%;height:200px;',//样式
                                $data['content'],//默认值
                                '*',//验证格式
                                '描述内容不能为空！'//非空说明
                            )

                            特殊说明:若一个页面有多个百度编辑器，则需添加一个字段
                            $html->ueditor(
                                'content',//字段名
                                'width:100%;height:200px;',//样式
                                $data['content'],//默认值
                                '*',//验证格式
                                '描述内容不能为空！',//非空说明
                                'editor1' 元素节点
                            )

                            $html->ueditor(
                                'content',//字段名
                                'width:100%;height:200px;',//样式
                                $data['content'],//默认值
                                '*',//验证格式
                                '描述内容不能为空！',//非空说明
                                'editor2' 元素节点
                            )

                            同时需添加脚本
                            UE.getEditor('editor1', {initialFrameWidth: "100%"});
                            UE.getEditor('editor2', {initialFrameWidth: "100%"});

                        </textarea>

                        <div id="unit_2" style="display: none">
                            <img src="/public/images/ueditor.jpg">
                        </div>
                    </li>

                    <!--图片上传组件-->
                    <li class="list-group-item">
                        <p>
                            <span class="label label-info">3</span> 图片上传组件（单图）
                            <button class="btn btn-warning btn-xs" onclick="show(3)"><i class="fa fa-eye"></i> <span class="bold">演示</span></button>
                        </p>
                        <textarea  class="codeDiv">
                            $html->fileInput(
                                'thumb',//name
                                $data.thumb,//默认值
                                '*',//验证格式
                                '封面图不能为空！'//非空说明
                            )

                            特殊说明:若一个页面有多个图片上传插件，则需添加一个字段
                            $html->fileInput(
                                'thumb',//name
                                $data.thumb,//默认值
                                '*',//验证格式
                                '封面图不能为空！',//非空说明
                                'fileInput1'
                            )

                            $html->fileInput(
                                'thumb',//name
                                $data.thumb,//默认值
                                '*',//验证格式
                                '封面图不能为空！',//非空说明
                                'fileInput2'
                            )

                            同时需添加脚本
                            initFileInput("fileInput1");
                            initFileInput("fileInput2");
                        </textarea>

                        <div id="unit_3" style="display: none">
                            {$html->fileInput(
                            'thumb',//name
                            '/public/images/demo.png',//默认值
                            '*',//验证格式
                            '封面图不能为空！'//非空说明
                            )}
                        </div>
                    </li>

                    <!--模态窗口-->
                    <li class="list-group-item">
                        <p>
                            <span class="label label-info">4</span> 模态窗口
                        </p>
                        <textarea  class="codeDiv">
                            //模态窗口代码
                            $html->modal(
                                'previewModal',//节点
                                '复选框预览'//标题
                                '展示内容'//展示内容
                                )
                            //显示方法
                            modalShow('previewModal',html);//参数1 操作为节点 参数2为展示内容

                            说明:展示内容modalShow的优先级大
                        </textarea>
                    </li>

                    <!--下拉菜单-->
                    <li class="list-group-item">
                        <p>
                            <span class="label label-info">5</span> 下拉菜单
                        </p>
                        <textarea id="code5" class="codeDiv">
                            //HTML代码
                            <select class="form-control" name="box_id">
                                    <option value="0">选择包厢</option>
                                    <option value="1">包厢1</option>
                                    <option value="2">包厢2</option>
                            </select>
                            //加载数据
                             <select class="form-control" name="box_id">
                                    <option value="-1">选择包厢</option>
                                    [foreach $boxs as $vo]
                                    <option value="[$vo->id]">[$vo->name]</option>
                                    [/foreach]
                             </select>

                            //add
                            <select class="form-control m-b" name="type">
                                <option value="0" [if condition="$data['type']==0"]selected="selected" [/if]>小包</option>
                                <option value="1" [if condition="$data['type']==1"]selected="selected" [/if]>大包</option>
                            </select>
                        </textarea>
                    </li>

                    <!--时间控件-->
                    <li class="list-group-item">
                        <p>
                            <span class="label label-info">6</span> 时间控件
                        </p>
                        <textarea  class="codeDiv">
                            //HTML代码
                            $html->time_input(
                                'st',//字段
                                $data['content']
                            )
                        </textarea>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</div>
<!--模态窗口-->
{$html->modal(
'previewModal',//节点
'复选框预览'//标题
)}

{include file="public/footer" /}
<script>
    $(document).ready(function () {
        /*代码编辑器start*/
        var codeDives=document.getElementsByClassName("codeDiv");
        for(var i=0;i<codeDives.length;i++){
            var editor = CodeMirror.fromTextArea(codeDives[i], {
                lineNumbers: true,
                matchBrackets: true,
                styleActiveLine: true,
                theme: "ambiance"
            });
            editor.setSize('auto', 'auto');
        }
        /*代码编辑器end*/
    });

    /**
     * 演示
     * @param val
     */
    function show(val) {
        var html=$("#unit_"+val).html();
        modalShow('previewModal',html);
    }
</script>
